<div class="main-content">
  <div style="" class="operation-button-group">
    <button mat-fab class="operation-button" matTooltip="新增配置" (click)="addFlowConfig()">
      <i nz-icon nzType="plus"></i>
    </button>

    <button mat-fab class="operation-button" matTooltip="删除所选配置" (click)="deleteFlows(getSelectFlowIdList())"><i
      nz-icon nzType="delete"></i></button>

    <button mat-fab class="operation-button" matTooltip="刷新配置列表" (click)="app.refreshAllFlowConfigList()">
      <i nz-icon nzType="sync"></i>
    </button>

    <button mat-fab class="operation-button" matTooltip="刷新服务端配置(使最新配置生效)" (click)="reloadServerFlow()">
      <i nz-icon nzType="cloud-sync" nzTheme="outline"></i>
    </button>

  </div>
  <mat-form-field>
    <mat-label>Filter</mat-label>
    <input matInput (keyup)="applyFilter($event)" placeholder="" #filterInput>
  </mat-form-field>
  <div class="mat-elevation-z8">
    <div class="table-container">
      <table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows>

        <ng-container *ngFor="let columnName of displayedColumns" [matColumnDef]="columnName">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{columnName}}</th>
          <td mat-cell *matCellDef="let element">{{element[columnName]}}</td>
        </ng-container>

        <!-- Checkbox Column -->
        <ng-container matColumnDef="select">
          <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox (change)="$event ? masterToggle() : null"
                          [checked]="selection.hasValue() && isAllSelected()"
                          [indeterminate]="selection.hasValue() && !isAllSelected()"
                          color="primary">
            </mat-checkbox>
          </th>
          <td mat-cell *matCellDef="let row">
            <mat-checkbox (click)="$event.stopPropagation()"
                          (change)="$event ? selection.toggle(row) : null"
                          [checked]="selection.isSelected(row)"
                          [aria-label]="checkboxLabel(row)"
                          color="primary">
            </mat-checkbox>
          </td>
        </ng-container>

        <ng-container matColumnDef="operation">
          <th mat-header-cell *matHeaderCellDef>operation</th>
          <td mat-cell *matCellDef="let element">
            <button mat-raised-button color="primary" [autofocus]="false" (click)="editFlowConfig(element)">编辑</button>
            &nbsp;&nbsp;
              <button mat-raised-button color="primary" [autofocus]="false" (click)="deleteFlows([element['_id']])">删除</button>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns.concat(['operation', 'select']); sticky: true"></tr>
        <tr class="element-row" mat-row
            *matRowDef="let row; columns: displayedColumns.concat(['operation','select'])"></tr>

        <!-- Row shown when there is no matching data. -->
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" colspan="4">
            <span style="color: red">No data matching the filter</span> "{{filterInput.value}}"
          </td>
        </tr>

      </table>
    </div>
    <mat-paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons></mat-paginator>
  </div>
</div>

